<template>
  <div class="index">
    <m-search ref="search" :imgUrl="'logo'" :style="{backgroundColor: 'rgba(24,155,235,'+ opacity +')'}"/>
    <home-page/>
    <m-footer />
  </div>
</template>

<script>
import mFooter from "@/components/footer";
import homePage from '@/components/homePage'
import mSearch from "@/components/search";
export default {
  components: {
    mFooter,
    mSearch,
    homePage
  },
  data() {
    return {
      opacity: 0,
    };
  },
  methods: {
    // handleScroll() {
    //   var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    //   var searchHeight = this.$refs.search.$el.offsetHeight;
    //   var bannerHeight = this.$refs.banner.$el.offsetHeight;
    //   this.opacity = scrollTop / (bannerHeight - searchHeight);
    // },
    handleScroll() {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      var searchHeight = this.$refs.search.$el.offsetHeight;
      // var bannerHeight = this.$refs.banner.$el.offsetHeight;
      this.opacity = scrollTop / (searchHeight);
    }
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>

<style scoped lang="less">
.index {
  .pb(@fheight);
}
</style>
